<style scoped>
.dialog-footer {
  text-align: center;
}

.form-body {
  max-width: 450px;
  margin: 0 auto;
}
</style>

<template>
  <div class="app-container">
    <h4 class="form-header h4" style="margin: 18px 0 25px 0">基本信息</h4>
    <el-form :model="form" label-width="auto" class="form-body">
      <el-row>
        <el-col :span="12">
          <el-form-item label="机主名称：">
            {{ form.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份：">
            <dict-tag :options="wxz_order_identity" :value="form.identity"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学号：">
            {{ form.studentId }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址：">
            {{ form.building }}#{{ form.dormitory }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机：">
            {{ form.phone }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修类型：">
            <dict-tag :options="wxz_order_type" :value="form.type"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单状态：">
            <dict-tag :options="wxz_order_status" :value="form.status"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修人员：">
            {{ form.nickName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="创建时间：">
            {{ form.createTime }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间：">
            {{ form.updateTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="完成时间：">
            {{ form.completionTime }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新人：">
            {{ form.updateBy }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="转让人：">
            {{ form.assignorName }}
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="form.archiveTime != null">
          <el-form-item label="存档日期：">
            {{ form.archiveTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注：">
            {{ form.remark }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单详情：">
            {{ form.details }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="dialog-footer">
        <el-col :span="24">
          <el-button icon="RefreshRight" type="primary" plain @click="comeback">
            返回
          </el-button>
          <el-button
              v-if="form.isUploads === 1"
              v-hasRole="['club_leader']"
              icon="Remove" type="warning"
              plain
              @click="withdraw">
            撤销图片
          </el-button>
        </el-col>
      </el-row>
      <div v-show="form.isUploads === 1">
        <h3 style="font-weight: bold">拆机维修照片：</h3>
        <div v-for="(urls, group) in photoList" :key="group">
          <div style="font-weight: bold; margin-top: 12px;">第 {{ group }} 组</div>
          <el-image
              v-for="(url, index) in urls"
              :key="index"
              style="width: 100px; height: 100px; margin: 8px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="urls"
              :initial-index="index"
              fit="cover"
              lazy
              show-progress
          />
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup name="OrderDesc111">
import tab from "@/plugins/tab.js"
import {useRoute, useRouter} from "vue-router";
import {getUser} from '@/api/system/user.js'
import {userOrderState} from "@/store/index.js"
import {getPhotoList, withdrawPhoto} from "@/api/qiniu.js";

const orderState = userOrderState();
const route = useRoute();
const router = useRouter()

const {proxy} = getCurrentInstance();
const {
  wxz_order_type,
  wxz_order_identity,
  wxz_order_status,
  wxz_order_building
} = proxy.useDict('wxz_order_type', 'wxz_order_identity', 'wxz_order_status', 'wxz_order_building');
const loading = ref(true);
const form = ref({
  id: undefined,
  name: undefined,
  identity: undefined,
  studentId: undefined,
  building: undefined,
  dormitory: undefined,
  phone: undefined,
  type: undefined,
  details: undefined,
  status: undefined,
  staffId: undefined,
  createTime: undefined,
  updateTime: undefined,
  updateBy: undefined,
  completionTime: undefined,
  assignorId: undefined,
  assignorName: undefined,
  remark: undefined,
  delFlag: undefined,
  isUploads: 0
});

const photoList = ref([])

const comeback = () => {
  orderState.clear()
  const path = form.value?.archiveTime ? '/wxz/history' : '/wxz/now'
  tab.closeOpenPage({ path })
}


const withdraw = async () => {
  await withdrawPhoto(form.value.id)
  form.value.isUploads = 0
  await tab.refreshPage()
  await nextTick();
}


(async () => {
  const order = orderState.order;
  // 拷贝一份数据，避免直接覆盖
  const newForm = {...order};

  if (order.assignorId !== null) {
    try {
      const res = await getUser(order.assignorId);
      newForm.assignorName = res.data.nickName;
    } catch (e) {
      console.error("获取用户信息失败", e);
    }
  } else newForm.assignorName = '无'

  photoList.value = (await getPhotoList(order.id)).data

  //console.log(photoList.value)

  // 等 DOM 更新完之后再赋值
  await nextTick();
  form.value = newForm;
})();
</script>

